import React from 'react'
import { Form, Input, Button, message, Card } from 'antd';
import { useHistory } from 'react-router-dom';
import { loginAPI } from "../service/auth";//引入并调用登陆接口
import { setToken } from "../utils/auth";



const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

export default function Login() {
  const { push } = useHistory()
  const onFinish = (values) => {
    console.log('Success:', values);
    loginAPI(values).then(res => {
      console.log(res)
      message.success('登陆成功')
      setToken(res.token)
      push('/admin/home')
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='box'>
      <div className="login-page">
        <Card title="客户信息管理系统">
          <Form
            {...layout}
            name="basic"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="账号"
              name="userName"
              rules={[
                {
                  required: true,
                  message: '账号不能为空！',
                },
                /* {
                  min: 4,
                  message: '用户名不得少于4位',
                },
                {
                  pattern: /^[a-zA-Z0-9_]+$/,
                  message: "用户名必须是英文、数字或下划线组成",
                }, */
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '密码不能为空!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                登陆
        </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}
